<template>
  <div class="content_left">
    <a-button @click="paintOn">
      创建弧形   
    </a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';
import Konva from 'konva';
import { mapState, mapMutations} from 'vuex';
export default ({
  components:{
    AButton: Button
  },
  inject: ['pageStage', 'pageLayer'],
  data() {
    return {
      prop: {
        x: 500,
        y: 100,
        innerRadius: 98.5,
        outerRadius: 100.5,
        angle: 270,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 0,
        rotation: 180
      }
    }
  },
  computed: mapState({ circle: state => state.circle }),
  methods: {
    ...mapMutations(['changeClassName']),
    paintOn() {
      this.changeClassName({className: 'Arc'})
      const layer = this.pageLayer.value;
      const stage = this.pageStage.value;
      stage.off();
      stage.on('contextmenu',function(e) {
        e.evt.preventDefault();
        return;
      })
      
      console.log(this.prop.x, this.prop.y)
      // console.log(Math.sqrt( (c.x-this.prop.x) * (c.x-this.prop.x) + (c.y-this.prop.y) * (c.y-this.prop.y))  )
      // let BJL = Math.sqrt((c.x-this.prop.x) * (c.x-this.prop.x) + (c.y-this.prop.y) * (c.y-this.prop.y))
      // let ZL = 1000;
      // console.log(BJL)
      // console.log((BJL )* (BJL )- 500 * 500)
      // let Value = Math.sqrt((BJL )* (BJL )- 500 * 500)
      // console.log(Value,'一半')
      const graph = new Konva.Arc(this.prop);
      layer.add(graph);
      layer.batchDraw()
    }
  }
})
</script>

<style scoped lang="less">

</style>
